import React from 'react';
import { connect } from 'dva';
import { Table, Icon, message } from 'antd';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import _ from 'lodash';

import { getCol } from '../task/col';

import style from './submit.less';

// 获取用户提交记录的列表, 支持审核功能
class SubmitList extends React.Component {
  constructor(p) {
    super(p);
    const col = getCol(['createtime', 'file', 'id', 'text']);
    this.col = col.concat(this.getTail());
  }

  componentWillMount() {
    const { dispatch, mode } = this.props;
    if (mode === 'remote') {
      dispatch({
        type: 'submit/getSubmits',
        payload: {
          id: this.props.fatherId,
        },
      });
    }
  }

  /**
   * 获取表格中的两个尾部的选项:
   * 1, 状态选项: 『通过 | 不通过』
   * 2, 操作选项 『合格 | 不合格』
   */
  getTail = () => {
    return [
      {
        title: '状态',
        render: (text, record) => {
          if (!record.state) {
            return (<span style={{ color: 'orange' }}><Icon type="clock-circle" />未审核</span>);
          }
          if (record.state === 'pass') {
            return (<span style={{ color: 'green' }}><Icon type="check" />合格</span>);
          }
          if (record.state === 'refuse') {
            return (<span style={{ color: 'red' }}><Icon type="close" />不合格</span>);
          }
          return null;
        },
      },
      {
        title: '操作',
        render: (text, record) => {
          return (
            <div>
              <a
                className={classNames({
                  [style.disable]: record.state === 'pass',
                  [style.pass]: true,
                })}
                onClick={this.updateState(record, 'pass')}
                disabled={record.state === 'pass'}
              >
                <Icon type="check" />合格
              </a>
                  &nbsp;|&nbsp;
                <a
                  className={classNames({
                    [style.disable]: record.state === 'refuse',
                    [style.refuse]: true,
                  })}
                  onClick={this.updateState(record, 'refuse')}
                  disabled={record.state === 'refuse'}
                >
                  <Icon type="close" />不合格
                </a>
            </div>
          );
        },
      },
    ];
  }

  /**
   * 更新一条记录是否通过
   * @param {object} record 记录
   * @param {string} state 状态 enum['pass', 'refuse']
   * @return {function}
   */
  updateState(record, state) {
    return () => {
      const { dispatch } = this.props;
      dispatch({
        type: 'submit/updateState',
        payload: {
          id: record.id,
          state,
          submitId: this.props.fatherId,
          mode: this.props.mode,
          onEnd: (err) => {
            // local模式时调用
            if (err) {
              return message.error('操作失败');
            }
            message.success('操作成功');
            record.state = state; // eslint-disable-line
            this.setState({});
          },
        },
      });
    };
  }

  render() {
    const { mode } = this.props;
    let submitData = [];
    if (mode === 'local') {
      submitData = _.get(this, 'props.submitData');
    } else if (mode === 'remote') {
      submitData = _.get(this, 'props.submit.submitData');
    }

    return (
      <div>
        <h3>用户提交记录列表:</h3>
        <Table
          dataSource={submitData}
          columns={this.col}
          rowKey="id"
        />
      </div>
    );
  }
}

SubmitList.propTypes = {
  fatherId: PropTypes.string, // 查询记录的父id
  mode: PropTypes.string, // 模式, enum ['local', 'remote']
  // 本地模式时提供的数据
  submitData: PropTypes.array, // eslint-disable-line
};

SubmitList.defaultProps = {
  mode: 'remote',
};

export default connect(state => state)(SubmitList);
